<template>
  <div class="login" :style="clieHeight">
    <div class="login_line2"></div>
    <van-dialog
      v-model="show"
      title="修改服务器指向地址"
      :show-confirm-button="isShou"
    >
      <form class="login_form">
        <input
          type="text"
          name="username"
          v-model="formValue"
          placeholder="请输入服务器地址"
        />
      </form>
      <div class="form_box">
        <button class="quxiao" @click="goChang">取消</button>
        <button class="queding" @click="submitAddres">确定</button>
      </div>
    </van-dialog>
    <div class="login_line3">
      <div class="line3_top">
        <span>登录</span>
        <svg @click="goChang" class="icon" aria-hidden="true">
          <use xlink:href="#icon-fuwuqidizhi"></use>
        </svg>
      </div>
      <div class="line3_input1">
        <label>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-geren"></use>
          </svg>
        </label>
        <input
          type="text"
          class="login_name"
          v-model="value1"
          placeholder="请输入用户名"
        />
      </div>
      <div class="line3_input2">
        <label>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-mima"></use>
          </svg>
        </label>
        <input
          type="password"
          class="login_password"
          v-model="value2"
          placeholder="请输入您的密码"
        />
      </div>
      <button class="login_submit" @click="isTrue">登录</button>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import "../assets/iconfont/iconfont.js";
export default {
  data: () => ({
    value1: "",
    value2: "",
    clieHeight: "",
    show: false,
    formValue: "",
    userInfo: [],
    isShou: false,
  }),
  created() {
    this.getHeight();
    this.isLogin();
    this.getServeAddress();
  },
  methods: {
    getHeight() {
      this.clieHeight = `height:${window.innerHeight}px`;
    },
    goChang() {
      this.show = !this.show;
    },
    isLogin() {
      if (JSON.parse(localStorage.getItem("users")) !== null) {
        this.$router.push("/home");
      }
    },
    getServeAddress() {
      if (JSON.parse(localStorage.getItem("address")) !== null) {
        // console.log(JSON.parse(localStorage.getItem("address")));
        this.formValue = JSON.parse(
          localStorage.getItem("address")
        ).serveAddress;
      }
    },
    submitAddres() {
      this.show = !this.show;
      let param = {
        serveAddress: this.formValue,
      };
      localStorage.setItem("address", JSON.stringify(param));
    },
    isTrue() {//登录判断
      let prams = {
        loginName: this.value1,
        password: this.value2,
      };
      this.getUserInfo(prams);
    },
    //获取用户数据
    getUserInfo(prams) {
      this.$axios.post("/android/appLogin", prams,{
        withCredentials:true
      }).then((res) => {
        console.log(res);
        if (res.data.code === 1) {
          let { data } = res.data;
          let localUser = {
            userType: data.user.userType,
            loginName: data.user.loginName,
            roleIds: data.user.roleIds,
            id: data.user.id,
            phone: data.user.phone,
            roleName: data.user.roleName
          };
          localStorage.setItem("users", JSON.stringify(localUser));
          this.$router.push("/home");
        } else if (res.data.code === 3) {
          Dialog.alert({
            message: res.data.msg,
          }).then(() => {
            // on close
          });
        } else if (res.data.code === 5) {
          Dialog.alert({
            message: res.data.msg,
          }).then(() => {
            // on close
          });
        } else {
          Dialog.alert({
            message: "出现未知错误",
          }).then(() => {
            // on close
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.icon {
  .icon_fuwu {
    font-size: 12px;
  }
}
.login {
  .van-dialog {
    width: 335px;
    height: 190px;
    .van-dialog__header {
      font-size: 16px;
      color: #333;
      padding-top: 25px;
      box-sizing: border-box;
    }
    .van-dialog__content {
      margin-top: 15px;
    }
    .login_form {
      padding: 1px;
      box-sizing: border-box;
      input {
        width: 305px;
        height: 45px;
        background-color: #fff;
        border-color: #c5cfc6;
        text-align: center;
      }
    }
    .form_box {
      margin-top: 25px;
      text-align: center;
      button {
        width: 80px;
        height: 35px;
        border-radius: 10px;
        border: 1px solid #c5cfd6;
        color: #333;
        font-size: 14px;
        background-color: #fff;
      }
      .quxiao {
        margin-right: 35px;
      }
      .queding {
        background-color: #0195ff;
      }
    }
  }
  .login_line2 {
    height: 309px;
    background-image: url("../assets/登录bg.png");
    background-size: 100% 100%;
  }
  .login_form {
    text-align: center;
    height: 50px;
    // padding-top: 10px;
    input {
      margin-top: 10px;
      border: 1px solid gray;
    }
  }
  .login_line3 {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    text-align: center;
    background-color: #fff;
    position: relative;
    top: -89px;
    margin: auto;
    width: 89%;
    margin: auto;
    height: 285px;
    border-radius: 10px;
    padding: 25px 27px 35px 27px;
    box-sizing: border-box;
    .line3_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      font-size: 20px;
      color: #333;
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box;
      .icon {
        font-size: 19px;
      }
    }
    .line3_input1,
    .line3_input2 {
      width: 100%;
      height: 43px;
      background-color: #ebeff2;
      display: flex;
      align-items: center;
      border-radius: 7px;
      padding-left: 20px;
      box-sizing: border-box;
      input {
        width: 100%;
        outline: none;
        border: none;
        background-color: #ebeff2;
        font-size: 17px;
      }
      input::input-placeholder{
        color:#ccc;
      }
      .icon {
        margin-right: 18px;
        font-size: 18px;
      }
    }
    .line3_input1 {
      margin-bottom: 15px;
    }
    .login_submit {
      margin-top: 40px;
      width: 210px;
      height: 40px;
      border: none;
      border-radius: 10px;
      background-color: #0195ff;
      color: #fff;
    }
  }
}
</style>
